<template>
  <LxyBox title="工人培训">
    <div class="worker-training">
      <div class="data">
        <div class="item">
          <count-to
            class="val"
            :startVal="0"
            :endVal="trainCount"
            :duration="1000"
          ></count-to>
          <p class="key">累计培训(人次)</p>
          <img
            src="@/assets/bigscreen3/icon_leijipeixun.png"
            alt=""
            class="icon"
          />
        </div>

        <div class="item">
          <count-to
            class="val color2"
            :startVal="0"
            :endVal="holdCount"
            :duration="1000"
          ></count-to>
          <p class="key">颁发电子证件(本)</p>
          <img
            src="@/assets/bigscreen3/icon_dianzizhengjian.png"
            alt=""
            class="icon"
          />
        </div>

        <div class="item">
          <count-to
            class="val color3"
            :startVal="0"
            :endVal="productCount"
            :duration="1000"
          ></count-to>
          <p class="key">累计开展培训(场)</p>
          <img
            src="@/assets/bigscreen3/icon_kaizhanpeixun.png"
            alt=""
            class="icon"
          />
        </div>
      </div>
    </div>
  </LxyBox>
</template>

<script setup>
import LxyBox from "./lxyBox";
import { ref, onMounted } from "vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";
import { ajax } from "@/store/service";

const trainCount = ref(0);
const holdCount = ref(0);
const productCount = ref(0);

const init = async () => {
  const [res] = await ajax.training();
  trainCount.value=res.trainCount
  holdCount.value=res.holdCount
  productCount.value=res.productCount
};

onMounted(() => {
  init();
});

</script>
<style scoped lang='scss'>
.worker-training {
  height: vh(173);
  display: flex;
  align-items: center;

  .data {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      .val {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: vh(24);
        color: #0bdc8c;
        line-height: vh(26);
        text-align: right;
        font-style: normal;
        text-transform: none;
        margin-bottom: vh(8);
      }
      .color2 {
        color: #66ffff;
      }
      .color3 {
        color: #f7a832;
      }
      .key {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-size: vh(14);
        color: #ffffff;
        line-height: vh(21);
        text-align: left;
        font-style: normal;
        margin-bottom: vh(13);
        opacity: 0.8;
      }
      .icon {
        height: vh(51);
      }
    }
  }
}
</style>